<template>
    <div>
        <headNav></headNav>
       <div class="head"></div>
       <div class="content">  
            <div class="form_con">
                  <img style="width:333px;height:97px;margin:30px 0 50px 0" src="./../static/images/uploadpage_btn.png" alt="">
                  <el-form ref="form" :model="form" label-width="0" class="myform">
                    <el-form-item > 
                        <p class="label_p">主题：</p>
                        <el-select @change="changeSel" v-model="form.topic" class="custom-select" :popper-append-to-body="false">
                        <el-option label="普通" value="0"></el-option>
                        <!-- <el-option label="75周年作品征集" value="1"></el-option> -->
                          <!-- <el-option label="交通安全" value="2"></el-option> -->
                          <el-option label="“行走的思政课”X“走遍杭州的博物馆”联创活动" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <p class="label_p">作品名称：</p>
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p class="label_p">作者：</p>
                        <el-input v-model="form.author"></el-input>
                    </el-form-item>
                    <el-form-item> 
                        <p class="label_p">作品类型：</p>
                        <el-select   v-model="form.type" :popper-append-to-body="false">
                        <el-option label="视频" value="1"></el-option>
                        <el-option label="图片" value="0" v-if="form.topic==3"></el-option> 
                        </el-select>
                    </el-form-item>
                    <p class="tip_p"  v-if="form.type==1">注：格式为MP4，视频分辨率不低于1280*720。作品时长3分钟以内。</p>
                     <p class="tip_p" v-if="form.type==0">注：请使用专业相机或手机拍摄高清照片（或组图），JPG格式，横竖不限，图片清晰、内容明确。</p> 
                    <el-form-item class="mytera">
                        <p class="label_p">作品描述：</p>
                        <el-input type="textarea" placeholder="(200字以内)" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: -14px !important;">
                        <div class="up_button" >
                            <input  v-if="form.type==0" accept="image/*"   class="up_input" type="file" ref="file" @change="upload2($event)">
                            <input  v-if="form.type==1" accept="video/*"   class="up_input" type="file" ref="file" @change="upload1($event)">
                        </div>
                        <div>
                          <div class="imgBox">
                           <template v-if="form.type==0&&videoList.length>0">
                              <div style="width: 120px; height: 100px;" v-for="(item) in videoList" :key="item">
                                <img  @click="pre(item,0,'img')" style="width: 100px; height: 100px;object-fit: cover;padding-right: 20px;" :src="'https://eduvideo.hangzhou.com.cn'+item" alt="">
                              </div>
                           </template>
                           <template v-if="form.type==1&&videoList.length>0">
                               <video @click="pre(videoList[0],1,'video')"  poster="./../static/images/videop.jpg"    style="width: 100px; height: 100px;object-fit: cover;padding-right: 20px;" :src="'https://eduvideo.hangzhou.com.cn'+videoList[0]"></video>
                           </template>
                          </div>
                        </div>
                    </el-form-item>
                    <el-form-item v-show="showPress">
                      <el-progress :percentage="fileUploadPercent" :color="customColor"></el-progress>
                  </el-form-item>
                  
                    <el-form-item class="mytera">
                        <p class="label_p"></p>
                    </el-form-item>
                    <el-form-item  v-if="form.type==1">
                      <p class="label_p">上传视频封面：</p>
                      <div class="up_button1" v-if="posterList.length==0">
                          <input  accept="image/*"  class="up_input1" type="file" ref="file" @change="upload($event)">
                      </div>
                      <div  v-if="posterList.length>0">
                          <div   v-for="item in posterList" :key="item" >
                              <img @click="pre(posterList[0],0,'poster')" :src="'https://eduvideo.hangzhou.com.cn'+posterList[0]"  style="width: 100px; height: 100px;object-fit: cover;padding-right: 20px;"  alt="">
                          </div>
                        </div>
                    </el-form-item>
                    <el-form-item> 
                      <p class="label_p">是否为达人：</p>
                      <el-select v-model="form.talent" :popper-append-to-body="false">
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                      </el-select>
                  </el-form-item>
                    <el-form-item v-if="form.talent==1">
                        <p class="label_p">达人列表：</p>
                      <el-select class="mysel" v-model="form.talent_id" filterable  placeholder="请选择" :popper-append-to-body="false">
                          <el-option v-for="(item,index) in dr" :key="index" :label="item.name" :value="item.id"></el-option>
                    
                      </el-select>
                    </el-form-item>
                    <el-form-item style="width: 48% !important;">
                        <p class="label_p">联系人：</p>
                        <el-input v-model="form.contact"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 48% !important;margin-left: 4%;">
                        <p class="label_p">联系电话：</p>
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <img @click="submit" class="confirm" src="./../static/images/confirm.png" alt="">
            <el-dialog title="预览" :visible.sync="dialogFormVisible" :close-on-click-modal="no" :show-close="no">
              <video  v-if="form.type==1&&isVideo" controls  style="width:100%;height:100%" :src="'https://eduvideo.hangzhou.com.cn'+videoList[0]"></video>
              <img style="width:100%;height:100%" v-if="!isVideo" :src="'https://eduvideo.hangzhou.com.cn'+src" alt="">
              <div slot="footer" class="dialog-footer">
                <el-button @click="del">删除</el-button>
                <el-button type="primary" @click="confirm">退出</el-button>
              </div>
            </el-dialog>
       </div>
       <footComponent></footComponent>
       
    </div>
  </template>
  
  <script>
import axios from 'axios';

import footComponent from '@/common/foot.vue';
import headNav from '@/common/headNav.vue';

export default {
    name: 'upPage',
    components:{
     headNav,
     footComponent,
  },
    data(){
      return{
        form:{
            topic:'0',
            title:'',
            author:'',
            type:'1',
            description:'',
            poster:'',
            talent_id:'',
            contact:'',
            phone:'',
            talent:'0'
            },
            dr:[],
            posterList:[],
            videoList:[],
            video:'',
            src:'',
            no:false,
            dialogFormVisible:false,
            wh:'',
            isVideo:false,
            fileUploadPercent:0,
            customColor:[{color:'#616ed6'}],
            showPress:false,
            selDisabled:false
            
      }
    },
    created(){
      this.getDrList();
    },
    methods:{
         changeSel(e){
          if(e==0){
             this.selDisabled = true
             this.form.type = '1'
          }
          if(e==1){
             this.selDisabled = false
          }
       
         },
        getDrList(){
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
            this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/talent').then((res)=>{
                if(res.data.data){
                  res.data.data.forEach(item =>{
                  this.dr.push({
                    id:item.id,
                    name:item.name,
                  })
                } )
                }else{
                  this.$message({
                    showClose: true,
                    message: '暂无达人数据,请到个人中心添加！',
                    type: 'warning'
                  });
                }
            })
          },
          upload(e){
        
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
                   //定义允许上传格式 在前台就可以直接判断，不合法的格式将不会上传
                   var imgtype = ['jpg', 'jpeg', 'png','image/jpeg','image/png'];  //允许上传的图片格式
                     var fi = e.target.files[0]; //得到文件信息
                    if(fi.size>(100*1024*1024)){
                                this.$message({
                                    showClose: true,
                                    message: '文件大小不能超过100MB！',
                                    type: 'error'
                                 });
                        return false;
                    }
                    if (fi!=null) {
                        //判断文件格式是否是图片 如果不是图片则返回false
                        var fname = fi.name.split('.');
                        var type = fi.type
                        //实例化h5的fileReader
                        // var fr = new FileReader();
                        // fr.readAsDataURL(fi); //以base64编码格式读取图片文件
                        if(imgtype.indexOf(type.toLowerCase()) !=-1 ){
                            // fr.onload = function (frev) {
                            //     var vid = frev.target.result; //得到结果数据
                                //使用ajax 提交数据
                                 var form = new FormData();
                                form.append("act","upload");
                                // form.append("msg",pic);
                                form.append("filename",fname[0]);
                                form.append("file",fi);
                                form.append("filetype",fname[1]);
                                form.append("isvideo",'no');
                               
                                this.$axios.post('https://eduvideo.hangzhou.com.cn/api/v1/upload',form).then(res=>{
                                    if(res.data.status == 'success'){
                                        this.posterList.push(res.data.data.path)
                                        this.poster = res.data.data.path
                                            e.target.value = ''
                                        this.$message({
                                        message: '上传成功',
                                        type:'success',
                                        offset:window.screen.height/2,
                                        duration:300
                                        })
                                    }else{
                                        this.$message({
                                        message: res.data.message,
                                        type:'error',
                                        offset:window.screen.height/2,
                                        })
                                    }
                                
                                })
                        }else {
                                this.$message({
                                    showClose: true,
                                    message: '不支持该文件格式!',
                                    type: 'error',
                                    offset:window.screen.height/2,
                                    });
                                  return false;
                            
                        }
                    }
            },
      
            upload1(e){  
              this.showPress = true
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
                     var fi = e.target.files[0]; //得到文件信息
                    if(fi.size>(500*1024*1024)){
                                this.$message({
                                    showClose: true,
                                    message: '文件大小不能超过500MB！',
                                    type: 'error'
                                 });
                        return false;
                    }
                    if (fi!=null) {
                                let configs = {
                                    onUploadProgress: (progressEvent)=>{
                                        if (progressEvent.lengthComputable) {   //是否存在进度
                                            var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
                                            // this.progressBar = percentCompleted
                                            console.log('进度：',percentCompleted)
                                            this.fileUploadPercent=percentCompleted;
                                            this.$forceUpdate();
                                            }
                                            },
                                }
               
                               var fname = fi.name.split('.');
                                 var form = new FormData();
                                form.append("act","upload");
                                // form.append("msg",pic);
                                form.append("filename",fname[0]);
                                form.append("file",fi);
                                form.append("filetype",fname[1]);
                                form.append("isvideo",'no');
                                this.$axios.post('https://eduvideo.hangzhou.com.cn/api/v1/upload',form,configs).then(res=>{
                                    if(res.data.status == 'success'){
                                        this.videoList.push(res.data.data.path)
                                        this.src = res.data.data.path
                                        this.fileUploadPercent=100;
                                        this.showPress = false
                                        this.$message({
                                        message: '上传成功',
                                        type:'success',
                                        offset:window.screen.height/2,
                                        duration:1000
                                        })
                                         e.target.value = ''
                                    }else{
                                        this.$message({
                                        message: res.data.message,
                                        type:'error',
                                        offset:window.screen.height/2,
                                        })
                                        this.showPress = false
                                    }
                                
                                })
                 
                    }
            },
            upload2(e){
          
               //  设置最多可以传五张
               if (this.videoList.length >= 5) {
                    this.$message({
                        showClose: true,
                        message: '最多可上传五张图片',
                        type: 'error'
                    });
                    return false;
                }
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
                   //定义允许上传格式 在前台就可以直接判断，不合法的格式将不会上传
                   var imgtype = ['jpg', 'jpeg', 'png','image/jpeg','image/png'];  //允许上传的图片格式
                     var fi = e.target.files[0]; //得到文件信息
                    if(fi.size>(100*1024*1024)){
                                this.$message({
                                    showClose: true,
                                    message: '文件大小不能超过100MB！',
                                    type: 'error'
                                 });
                        return false;
                    }
                    if (fi!=null) {
                        //判断文件格式是否是图片 如果不是图片则返回false
                        var fname = fi.name.split('.');
                        var type = fi.type
                        //实例化h5的fileReader
                        // var fr = new FileReader();
                        // fr.readAsDataURL(fi); //以base64编码格式读取图片文件
                        if(imgtype.indexOf(type.toLowerCase()) !=-1 ){
                            // fr.onload = function (frev) {
                            //     var vid = frev.target.result; //得到结果数据
                                //使用ajax 提交数据
                                 var form = new FormData();
                                form.append("act","upload");
                                // form.append("msg",pic);
                                form.append("filename",fname[0]);
                                form.append("file",fi);
                                form.append("filetype",fname[1]);
                                form.append("isvideo",'no');
                               
                                this.$axios.post('https://eduvideo.hangzhou.com.cn/api/v1/upload',form).then(res=>{
                                 
                                    if(res.data.status == 'success'){
                                        this.videoList.push(res.data.data.path)
                                               e.target.value = ''
                                        // this.srcList.push('https://eduvideo.hangzhou.com.cn'+res.data.data.path)
                                        this.$message({
                                        message: '上传成功',
                                        type:'success',
                                        offset:window.screen.height/2,
                                        duration:300
                                        })
                                    }else{
                                        this.$message({
                                        message: res.data.message,
                                        type:'error',
                                        offset:window.screen.height/2,
                                        })
                                    }
                                
                                })
                        }else {
                                this.$message({
                                    showClose: true,
                                    message: '不支持该文件格式!',
                                    type: 'error',
                                    offset:window.screen.height/2,
                                    });
                                  return false;
                            
                        }
                    }
            },
            pre(src,type,str){
              this.dialogFormVisible = true
              this.wh = str
              this.src = src
                if (type == 1) {
                    this.isVideo = true
                } else {
                    this.isVideo = false
                }
            },
            del(){
              if (this.wh == 'img') {
                    this.videoList = this.videoList.filter(item => item != this.src)
                }
                if (this.wh == 'video') {
                    this.videoList = []
                }
                if (this.wh == 'poster') {
                    this.posterList = []
                }
                this.dialogFormVisible = false
            },
            confirm(){
              this.dialogFormVisible = false
            },
            reset(){
                 this.form.topic = '0'
                  this.form.title = ''
                  this.form.author = ''
                  this.form.type = '1'
                  this.form.description = ''
                  this.form.contact = ''
                  this.form.phone = ''
                  this.form.talent = '0'
                  this.form.talent_id = ''
                  this.videoList = []
                  this.posterList = []
                  this.poster = ''
                  this.src = ''
                  this.wh = ''
                  this.fileUploadPercent = 0
                  this.showPress = false
            },
            submit(){
              var file = []
              var token = localStorage.getItem('isLoginSuccess');
              axios.defaults.headers.common['Authorization'] = "Bearer " + token
              if(this.form.type=='1'){
                   var obj = {}
                   obj.file_path = this.videoList[0]
                   obj.file_cover = this.poster
                   file.push(obj)
              }
              if(this.form.type=='0'){
                   this.videoList.forEach(item=>{
                     var obj1 = {}
                     obj1.file_path = item
                     file.push(obj1)
                   })
              
              }
              var parms = {
                'activity_id':this.form.topic,
                "title": this.form.title,
                "author": this.form.author,
                "type": this.form.type,
                "description": this.form.description,
                "contact": this.form.contact,
                "phone": this.form.phone,
                'is_talent_upload':this.form.talent,
                'talent_id':this.form.talent_id,
                'files':file
              }
              this.$axios.post('https://eduvideo.hangzhou.com.cn/api/v1/upload_works',parms).then(res=>{
              
                if(res.data.status =='success'){
                  this.$message({
                    message: '添加成功',
                    type:'success',
                    offset:window.screen.height/2,
                    duration:2000
                  })
                  setTimeout(()=>{
                    this.reset()
                  })
                }else{
                  this.$message({
                    message: res.data.message,
                    type:'error',
                    offset:window.screen.height/2,
                  })
                }
              })
            }
    }
  }
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .up_input1{
    opacity: 0;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
  .up_button1{
    width: 100px;
    height: 100px;
  background: url('./../static/images/up1.png') no-repeat;
  background-size: 100% 100%;
  }
  .up_button{
    width: 338px;
    height: 69px;
    object-fit: cover;
    background: url('./../static/images/up_btn.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
  .up_input{
    opacity: 0;
    width: 338px;
    height: 69px;
    object-fit: cover;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
  .topNav{
    width: 100%;
    height: 65px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .nav_con{
    width: 1400px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
  }
  .nav_con a{
    text-decoration: none;
    font-size: 18px;
    color: #616ed6;
    cursor: pointer;
    letter-spacing: 5px;
  }
  .shu{
    color: #616ed6;
    margin: 0 35px;
  }
  .head{
    width: 100%;
    height: 464px;
    background: url('./../static/images/banner.jpg') no-repeat center top;
  }
  .content{
    width: 100%;
    height: auto;
    padding-bottom: 100px;
    background: url('./../static/images/detail_con.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .form_con{
    width: 860px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .label_p{
    margin: 0; padding: 0;
    color: #ffffff;
    font-size: 16px;
  }
  .tip_p{
    padding: 0;
    color: #646464;
    width: 100%;
    color: #fa96fe;
    font-size: 14px;
}
.el-form{
    width: 100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.el-form-item{
    width: 100% !important;
}
.el-form>>>.el-input__inner{
    background: transparent !important;
    color: #fff !important
}
.mytera>>>.el-textarea__inner {
    min-height: 140px !important;
    background: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
}
::v-deep .el-progress__text{
  color: #ffffff !important;
}
::v-deep .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
    border-color: #fff !important;
}
::v-deep .is-active:hover{
    border-color: #fff !important;
}
::v-deep .el-select .el-input__inner:focus {
    border-color: #fff !important;
    color: #fff !important;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #fff !important;
}
.el-select-dropdown__wrap>>> .el-select-dropdown__item.selected {
    color: #fff !important;
    
}
::v-deep .el-select-dropdown__list .selected{
    color: #606266!important;
  } 
  .confirm{
    width: 338px;
    height: 69px;
    margin-top: 60px;
    cursor: pointer;
  }
  .footer{
    width: 100%;
    height: 410px;
    background-color: #171e3f;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
  }
  .foot_div{
    width: 1400px;
  }
  .foot_top{
    width: 100%;
    height: 126px;
    border-bottom:2px solid #3c468b;
  }
  .footimg1{
    width: 150px;
    height: 40px;
    margin-top: 35px;
  }
  .footimg2{
    width: 217px;
    height: 46px;
    margin-left: 40px;
    margin-top: 25px;
  }
  .foot_bottom{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    margin-top: 40px;
  }
  .foot_bottom p{
    margin: 0 ;
    padding: 0;
    color: #6275d3;
  }
  .foot_div1{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .foot_div1 a{
    text-decoration: none;
    color: #6275d3;
  }
  .foot_div2{
     margin: 0 110px 0 120px;
  }
  .imgBox{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
  </style>
  